<template>
  <div class="collect">
    <back />
    <div
      class="shop"
      @click="$router.push('/detail/' + item.mtWmPoiId)"
      v-for="(item, index) in collectlist"
      :key="index"
    >
      <div class="img-box">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="text">
        <div class="name">{{ item.shopName }}</div>
        <div class="price">{{ item.averagePriceTip }}</div>
        <div class="desc">{{ item.minPriceTip }} {{ item.monthSalesTip }}</div>
      </div>
    </div>
  </div>
</template>

<script>
//从vuex导入 mapState 映射函数
import { mapState } from "vuex";
import back from "../components/back.vue";
export default {
  components: {
    back,
  },
  computed: {
    //mapState 语法糖 将vuex中的state数据映射为 $store.state.cl.collectlist
    ...mapState("cl", ["collectlist"]),
  },
};
</script>

<style lang="scss">
.collect {
  // .shoplist{
  margin: 10px;
  margin-bottom: 60px;
  .shop {
    display: flex;
    margin-bottom: 10px;
    .img-box {
      width: 100px;
      margin-right: 10px;
      img {
        width: 100%;
      }
    }
    .text {
      flex: 1;
    }
  }
  // }
}
</style>